<template>
    <view>
        <view class="header-nav">
            <view @click="goBack">
                <uni-icon type="arrowleft" size="24" style="font-size:52upx" color="#007aff"></uni-icon>
            </view>
            <view class="tab-row">
                <view class="switch-item" :class="tab==='资源详情'?'switch-active':''" @tap="toTab('资源详情')">资源详情</view>
                <view class="switch-item" :class="tab==='规则列表'?'switch-active':''" @tap="toTab('规则列表')">规则列表</view>
            </view>
            <view style="margin-right:16upx;" @tap="goaddRules">
                <uni-icon type="plus" size="24" style="font-size:52upx"></uni-icon>
            </view>
        </view>

        <view>
            <view v-if="tab==='资源详情'" class="resources-details">

                <view class="message-box">
                    <view style="width:34%">
                        <image class="bgyi" src="/static/bg01.jpg" mode="scaleToFill" @error="imageError"></image>
                    </view>
                    <view style="width:66%;">
                        <view class="time-row">
                            <view style="font-size: 36upx;color:#000000;">资源名称</view>
                            <view style="margin-left: -120upx">15s</view>
                            <view style="color:limegreen;font-size:28upx;">审核通过</view>
                        </view>
                        <view style="font-size:32upx;color:#999999;height: 108upx;line-height:108upx">制作单位</view>
                        <view style="font-size:32upx;color:#999999;">福建省厦门市&nbsp;&nbsp;&nbsp;海鲜水产</view>
                    </view>
                </view>

                <view class="message-title">
                    <uni-icon type="videocam" size="52" class="message-icon" color="orange">
                    </uni-icon>视频描述
                </view>

                <view class="message-content">
                    <view style="margin-left:20upx;color:#999999;">
                        这里是视频描述这里是视频描述这里是视频描述这里是视频描述这里是视频描述这里是视频描述这里是视频描述这里是视频描述这里是视频描述这里是视频描述这里是视频描述这里是视频描述这里是视频描述这里是视频描述
                    </view>

                </view>

                <view class="message-title">
                    <uni-icon type="compose" size="52" class="message-icon" color="#007aff">
                    </uni-icon>规则列表
                </view>

                <!-- <view class="message-content" >
                    <view class="message-item" style="margin-top:16upx;">

                        <view>规则名称：</view>
                        <view class="gray-item">规则名称</view>
                    </view>
                    <view class="message-item">
                        <view>播放日期：</view>
                        <view class="gray-item">播放日期</view>
                    </view>
                    <view class="message-item">
                        <view>播放上限：</view>
                        <view class="gray-item">播放上限</view>
                    </view>
                    <view class="message-item">
                        <view>优惠卷链接：</view>
                        <view class="gray-item">http:www.hahaha.com</view>
                    </view>
                </view> -->

                <view class="message-content">
                    <view class="message-border">
                        <view class="message-state">
                            <view>投放规则</view>
                            <view style="color:limegreen;margin-left: -228upx;"><text
                                    style="color:#000000">（</text>投放中<text style="color:#000000">）</text></view>
                            <view style="color:#007aff;">查看详情</view>
                        </view>
                        <view class="value-row">
                            <view class="value-data">
                                <view>83435</view>
                                <view>播放量</view>
                            </view>
                            <view class="value-data">
                                <view>78344</view>
                                <view>观看人数</view>
                            </view>
                            <view class="value-data" style="border:none">
                                <view>361.25</view>
                                <view>消费金额</view>
                            </view>
                        </view>
                    </view>

                    <view class="message-border">
                        <view class="message-state">
                            <view>投放规则</view>
                            <view style="color:limegreen;margin-left: -228upx;"><text
                                    style="color:#000000">（</text>投放中<text style="color:#000000">）</text></view>
                            <view style="color:#007aff;">查看详情</view>
                        </view>
                        <view class="value-row">
                            <view class="value-data">
                                <view>83435</view>
                                <view>播放量</view>
                            </view>
                            <view class="value-data">
                                <view>78344</view>
                                <view>观看人数</view>
                            </view>
                            <view class="value-data" style="border:none">
                                <view>361.25</view>
                                <view>消费金额</view>
                            </view>
                        </view>
                    </view>

                    <view class="message-border">
                        <view class="message-state">
                            <view>投放规则</view>
                            <view style="color:limegreen;margin-left: -228upx;"><text
                                    style="color:#000000">（</text>投放中<text style="color:#000000">）</text></view>
                            <view style="color:#007aff;">查看详情</view>
                        </view>
                        <view class="value-row">
                            <view class="value-data">
                                <view>83435</view>
                                <view>播放量</view>
                            </view>
                            <view class="value-data">
                                <view>78344</view>
                                <view>观看人数</view>
                            </view>
                            <view class="value-data" style="border:none">
                                <view>361.25</view>
                                <view>消费金额</view>
                            </view>
                        </view>
                    </view>
                </view>

            </view>




            <view v-else class="reules-list">
                222
            </view>
        </view>

    </view>
</template>
<script>
    import uniIcon from '@/components/uni-icon/uni-icon.vue';
    import socket from 'plus-websocket';
    var _self;
    export default {
        components: { uniIcon },
        data() {
            return {
                tab: '资源详情',

            }
        },
        onLoad() {
            _self = this;
            _self.getList()


        },
        methods: {
            goBack() {
                uni.switchTab({
                    url: '../advertisement/advertisement'
                });
            },
            toTab(title) {
                this.tab = title
            },
            goaddRules() {
                uni.navigateTo({
                    url: '../advertisement/addRules'
                });
            },
            getList() {
                const videoIndexPath = {
                    // 获取视频源列表 （审核通过）
                    company: "STQ",
                    api: "pc_AdVideo_index",
                    version: "1.0",
                    data: {
                        rows:20,
                        page:1,
                        // id:'3'
                    }
                };
                socket.sendSocketMessage({
					data: JSON.stringify(videoIndexPath)
				});
					
                // console.log(JSON.stringify(videoIndexPath))
				_self.getData()

            },
            getData(){
                socket.onSocketMessage(function (res) {
                    if (res !== '{"type":"ping"}') {
                        const resj = JSON.parse(res.data);
                        if (resj.code === -1) {
							uni.showToast({
								title: resj.message,
								icon: 'none',
								duration: 2000,
								position: 'center'
							});
						} else {
                            if(resj.api==="pc_AdVideo_index"){
                                console.log(resj)

                            }
                            
                        }
                    }
                   

                })
            }
        }
    }
</script>
<style>
    .header-nav {
        background-color: #F8F8F8;
        display: flex;
        flex: 1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 80upx;
        line-height: 80upx;
        font-size: 30upx;
    }

    .tab-row {
        width: 400upx;
        height: 50upx;
        border: 1px solid #007aff;
        border-radius: 10upx;
        display: flex;
        flex-direction: row;
        /* justify-content: space-around;
        align-items: center; */
    }

    .switch-item {
        width: 50%;
        line-height: 50upx;
    }

    .switch-active {
        background: #007aff;
        color: #ffffff;
    }

    .message-box {
        display: flex;
        flex-direction: row;
        margin: 20upx;
    }

    .bgyi {
        width: 200upx;
        height: 200upx;

    }

    .time-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 32upx;
        color: #999999;
    }

    .message-title {
        font-size: 32upx;
        margin: 40upx 0 0 20upx;
    }

    .message-icon {
        margin-right: 20upx;
    }

    .message-content {
        border-top: 1px solid #999999;
        font-size: 28upx;
    }

    .message-item {
        display: flex;
        flex-direction: row;
        height: 48upx;
        margin-left: 20upx;
    }

    .gray-item {
        color: #999999;
    }

    .message-border {
        border: 1px solid #999999;
        border-radius: 16upx;
        margin: 20upx;
    }

    .message-state {
        /* font-size: 32upx; */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #999999;
        margin: 0 60upx;
        height: 60upx;
        line-height: 60upx;
    }

    .value-row {
        display: flex;
        flex-direction: row;
        margin-top: 20upx;
        /* border-top: 1px solid #999999; */
        /* justify-content: space-around; */
        /* font-size: 32upx; */
        align-items: center;
        text-align: center;
    }

    .value-data {
        width: 33%;
        border-right: 1px solid #999;
        height: 88upx;
        /* margin: 16upx 0; */
        margin-bottom: 12upx;

    }
</style>